<template>
  <div class="user" :class="themeClass" :style="{minHeight: windowHeight}">
    <div class="header">
      Profile
    </div>

    <div class="user-info">
      <image mode="aspectFill" class="user-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557421323320&di=07c7a8434a8c79f23955aed36b441665&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fproducts%2F20150423%2Ftooopen_46116371.jpg"></image>
      <div class="user-info-box">
        <div class="title">Tatiana Shch</div>
        <div class="info color-text-secondary">+6 7777 7 777</div>
        <div class="btn btn-plain">Edit</div>
      </div>
    </div>
    <div class="user-list">
      <div class="title">Account</div>
      <div class="list-card container-background-color">
        <div class="card-item color-border-2">
          <div class="icon color-text-regular">
            <van-icon name="close" />
          </div>
          <div class="name color-text-secondary">Location</div>
        </div>
        <div class="card-item color-border-2">
          <div class="icon color-text-regular">
            <van-icon name="close" />
          </div>
          <div class="name color-text-secondary">Change Password</div>
        </div>
        <div class="card-item color-border-2">
          <div class="icon color-text-regular">
            <van-icon name="close" />
          </div>
          <div class="name color-text-secondary">Shipping</div>
        </div>
        <div class="card-item color-border-2">
          <div class="icon color-text-regular">
            <van-icon name="close" />
          </div>
          <div class="name color-text-secondary">Payment</div>
        </div>
      </div>
    </div>

    <div class="user-list">
      <div class="title">Notifications</div>
      <div class="list-card container-background-color">
        <div class="card-item color-border-2">
          <div class="name color-text-secondary">App Notifications</div>
        </div>
        <div class="card-item color-border-2">
          <div class="name color-text-secondary">Location Tracking</div>
        </div>
      </div>
    </div>

    <div class="user-list">
      <div class="title">Other</div>
      <div class="list-card container-background-color">
        <div class="card-item color-border-2">
          <div class="name color-text-secondary">Language</div>
        </div>
        <div class="card-item color-border-2">
          <div class="name color-text-secondary">Currency</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  components: {},
  data () {
    return {}
  },
  computed: {
    ...mapState('shop', {
      windowHeight: state => state.theme.windowHeight
    }),
    ...mapGetters('shop', {
      activeSetting: 'theme/activeSetting'
    }),
    themeClass: function () {
      return `theme-` + this.activeSetting.name
    }
  },
  beforeCreate () {},
  created () {
    // 获取页面高度
    this.$store.dispatch('shop/theme/getSystemInfo')
  },
  beforeMount () {},
  mounted () {},
  onLoad (options) {},
  onReady () {},
  onShow () {},
  onHide () {},
  onUnload () {},
  /**
     * for other event handlers, please check https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
     */
  methods: {}
}
</script>

<style lang="scss">
  .user {
    .header {
      height: 44px;
      line-height: 44px;
      margin-left: 30px;
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 15px;
    }
    .user-info {
      display: flex;
      margin: 0 30px 30px;
      .user-img {
        display: block;
        width: 120px;
        height: 120px;
        border-radius: 50%;
      }
      .user-info-box {
        flex: 1;
        margin: 10px 0 10px 30px;
        .title {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 5px;
        }
        .info {
          font-size: 14px;
          margin-bottom: 20px;
        }
        .btn {
          display: inline-block;
          padding: 0 15px;
          height: 30px;
          line-height: 30px;
          border-radius: 1000px;
        }
      }
    }

    .user-list {
      margin: 0 15px 30px;
      .title {
        font-weight: bold;
        margin-bottom: 15px;
      }
      .list-card {
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 15px 0 rgba(0,0,0,.15);
        .card-item {
          display: flex;
          padding: 10px 0;
          height: 24px;
          line-height: 24px;
          font-size: 16px;
          .icon {
            margin-right: 15px;
            .van-icon {
              font-size: 24px;
            }
          }
          .name {
            flex: 1;
          }
        }
      }
    }
  }
</style>
